<template>
  <view style="width: 100%; min-height: 100vh; background-color: #F8F8F8;">
    <view id="tabNav" style="width: 100%; position: fixed; top: 0; z-index: 99;">
      <scroll-view scroll-x class="bg-white nav text-center">
        <view class="flex text-center">
            <view class="cu-item flex-sub" :class="index==tab_cur?'text-red cur':''" v-for="(item,index) in tab_list" :key="index" @click="handleChangeTab(index)" :data-id="index">
              {{item}}
            </view>
        </view>
      </scroll-view>
    </view>
    <view v-if="tab_cur == 0 || tab_cur == 2">
      <view style="width: 100%; background-color: #F8F8F8;" :style="'height:'+tab_nav_height+'px'"></view>
      <view class="flex justify-between" style="width: 100%; padding: 0 20upx; flex-wrap: wrap;" v-if="show_flag">
        <view class="flex flex-direction bg-white list" v-for="(item,index) in page_main_data" :key="index" @click="handleToArticle(item.collection && item.collection.id, item.collection && item.collection.type)">
          <image :src="item.collection && item.collection.img_arr[0]" mode="aspectFill" style="width: 346upx; height: 384upx; border-radius: 20upx 20upx 0 0;"></image>
          <view class="flex flex-direction" style="padding: 20upx;">
            <view class="text-hidden" style="width: 100%; font-size: 28upx; font-weight: bold; color: black;">{{item.collection && item.collection.title}}
            </view>
            <view class="flex align-center" style="width: 100%; height: 40upx; margin: 20upx 0;">
              <view class="flex justify-center align-center tag">{{item.collection && item.collection.category}}</view>
              <view>
                <image src="/static/icon/index/dianzan@2x.png" style="width: 26upx; height: 26upx;margin: 0 8upx;"></image>
              </view>
              <view style="color: #999999; font-size: 24upx;">{{ item.collection && item.collection.zan_num }}</view>
            </view>
            <view v-if="tab_cur == 2" style="margin-bottom: 7%;">
              <view v-if="item.sale_price == '0.00'" style="font-size: 28upx; color: #D8D8D8; font-weight: bold;">免费</view>
              <view v-else style="font-size: 28upx; color: #E52718; font-weight: bold;">¥{{item.sale_price}}</view>
            </view>
            <view class="flex align-center">
              <image :src="item.collection.user && item.collection.user.avatar" mode="aspectFill" style="width: 44upx; height: 44upx; border-radius: 50%;"></image>
              <view class="text-hidden" style="width: 140upx; font-size: 24upx; color: #999999; margin-left: 10upx;">
                {{item.collection.user && item.collection.user.nick_name}}
              </view>
            </view>
<!--            <view class="flex justify-between align-center" style="width: 100%; height: 60upx;">-->
<!--              <view class="flex align-center">-->
<!--                <image :src="item.collection.user && item.collection.user.avatar" style="width: 44upx; height: 44upx; border-radius: 50%;"></image>-->
<!--                <view class="text-hidden" style="width: 140upx; font-size: 24upx; color: #999999; margin-left: 10upx;">-->
<!--                  {{item.collection.user && item.collection.user.nick_name}}-->
<!--                </view>-->
<!--              </view>-->
<!--              <view v-if="tab_cur == 2">-->
<!--                <view v-if="item.sale_price == '0.00'" style="font-size: 28upx; color: #E52718; font-weight: bold;">免费</view>-->
<!--                <view v-else style="font-size: 28upx; color: #E52718; font-weight: bold;">¥{{item.sale_price}}</view>-->
<!--              </view>-->
<!--            </view>-->
          </view>
        </view>
      </view>
    </view>
    <view v-else>
      <view style="width: 100%; background-color: #F8F8F8;" :style="'height:'+tab_nav_height+'px'"></view>
      <view style="padding: 0 20upx;" v-if="show_flag">
        <view class="flex justify-between bg-white tutorials-box" v-for="(item,index) in page_main_data" :key="index" @click="handleToArticle(item.collection && item.collection.id, item.collection && item.collection.type)">
          <image :src="item.collection && item.collection.img_arr[0]" mode="aspectFit" style="width: 286upx; height: 198upx; border-radius: 10upx;"></image>
          <view class="flex flex-direction" style="width: 50%;">
            <view class="text-hidden" style="font-size: 30upx; color: #000000; font-weight: bold; margin-top: 10upx;">{{item.collection && item.collection.name}}</view>
            <view class="flex align-center" style="font-size: 20upx; color: #C5C5C5; margin: 30upx 0;">
              <image src="/static/icon/tutorials/gongkaobaike@2x.png" style="width: 30upx; height: 28upx; margin-right: 10upx;"></image>
              <view>{{ item.collection && item.collection.video_tutorial_num }}</view>
              <view style="width: 2upx; height: 16upx; background-color: #C5C5C5; margin: 0 24upx;"></view>
              <image src="/static/icon/tutorials/kecheng@2x.png" style="width: 24upx; height: 28upx; margin-right: 10upx;"></image>
              <view>{{item.collection && item.collection.sale_num}}人在学</view>
            </view>
            <view class="flex align-center justify-between">
              <view style="font-size: 28upx; color: #E52718; font-weight: bold;">¥{{item.collection && item.collection.sale_price}}</view>
              <view class="flex align-center">
                <image :src="item.collection.admin && item.collection.admin.avatar" mode="aspectFill" style="width: 44upx; height: 44upx; border-radius: 50%;"></image>
                <view class="text-hidden" style="width: 120upx; font-size: 24upx; color: #999999; margin-left: 10upx;">
                  {{item.collection.admin && item.collection.admin.nick_name}}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="page_main_data.length == 0 && show_flag" class="justify-center align-center"
          style="width: 100%; padding: 40% 0; flex-direction: column; text-align: center;">
      <image src="/static/image/no_content@2x.png" style="width: 264upx; height: 264upx;"></image>
      <view class="flex justify-center" style="font-size: 24upx; color: #999999;">暂无内容</view>
    </view>
    <view>
      <view class="flex align-center justify-center"
            v-if="page_main_data.length >=15"
            style="width: 100%; height: 102upx; padding: 0 50upx;">
        <view style="width: 30%; height: 2upx; background-color: #F1F1F1;"></view>
        <view style="width: 40%; text-align: center;">
          <view v-if="!bottom_flag" style="color: #CACACA; font-size: 24upx; margin: 0 40upx;">到底了</view>
          <view v-else class="action">
            <view class="cu-load" :class="!is_load?'loading':'over'" style="font-size: 28upx; color: #CACACA;"></view>
          </view>
        </view>
        <view style="width: 30%; height: 2upx; background-color: #F1F1F1;"></view>
      </view>
    </view>
  </view>
</template>

<script>
import {numSwitch} from "utils/wxUtil";
import {collection_getListByCon} from "api/collect/collect"

export default {
  data() {
    return {
      scroll_left: 0, //tab栏横向移动距离
      tab_list: ['文章','教程','传帮带'], //tab数据
      tab_cur: 0, //tab索引
      bottom_flag: true, //触底标识
      page: 1, //分页
      page_main_data: [], //页面数据
      is_load: false, //加载
      tab_nav_height: 0, //tab菜单高度
      f_table: '', //收藏分类
      show_flag: false,
    }
  },
  methods: {
    pageInit(f_table='article',page = 1, type){
      this.f_table = f_table;
      collection_getListByCon({f_table, page}).then(res=>{
        if(type){
          this.page_main_data = [];
        }
        let temp_data = res.data.data;
        if(temp_data.length == 0){
          this.bottom_flag = false;
        }else {
          temp_data.forEach(item=>{
            if(item.collection){
              if(item.collection.zan_num){
                item.collection.zan_num = this.computeNum(item.collection.zan_num)
              }
              this.page_main_data.push(item);
            }
          })
        }
      }).finally(()=>{
          this.show_flag = true;
      })
    },
    computeNum: numSwitch,
    //去文章页
    handleToArticle(article_id, type) {
      if(type){
        const jump_url_obj = {
          article: {
            url: '/pages/article/article',
            query: {
              article_id
            }
          },
          article_product: {
            url: '/pages/passBand/projectDetail/projectDetail',
            query: {
              article_id
            }
          },
          product: {
            url: '/pages/passBand/otherDetail/otherDetail',
            query: {
              article_id
            }
          },
          chapter: {
            url: '/pages/tutorials/articleDetail/articleDetail',
            query:{
              course_id: article_id
            }
          },
          single: {
            url: '/pages/tutorials/articleDetail/articleDetail',
            query:{
              course_id: article_id
            }
          },
        }
        this.$uniNavigateTo(jump_url_obj[type])
      }
    },
    //切换tab栏
    handleChangeTab(index) {
      this.tab_cur = index;
      this.scroll_left = (index - 1) * 60;
      this.show_flag = false;
      switch (index) {
        case 0:
          this.f_table = 'article'
          this.pageInit('article', 1, 1);
          break;
        case 1:
          this.f_table = 'course'
          this.pageInit('course', 1, 1);
          break;
        case 2:
          this.f_table = 'product'
          this.pageInit('product', 1, 1);
          break;

      }
    }
  },
  mounted() {
    const query = uni.createSelectorQuery().in(this);
    query.select('#tabNav').boundingClientRect(data => {
      this.tab_nav_height = data.height + 15;
    }).exec();
  },
  onShow() {
    this.pageInit(this.f_table ? this.f_table : 'article', 1, 1);
  },
  //上拉加载
  onReachBottom() {
    if (this.bottom_flag) {
      this.is_load = false;
      this.page += 1;
      this.pageInit(this.f_table, this.page);
    }
    console.log('上拉加载')
  },
  //下拉刷新
  onPullDownRefresh() {
    this.bottom_flag = true;
    this.page = 1;
    this.pageInit(this.f_table, 1, 1);
    uni.stopPullDownRefresh();
  }
}
</script>

<style lang="less" scoped>
/deep/ .nav .cu-item{
  margin: 0 80upx;
  padding: 0;
}
.list {
  width: 346upx;
  height: 618upx;
  justify-content: space-between;
  border-radius: 20upx;
  margin-bottom: 30upx;
}
.tag {
  font-size: 22upx;
  padding: 0 12upx;
  color: #E52718;
  height: 40upx;
  background-color: #FFE9E7;
  border-radius: 4upx;
}
.tutorials-box {
  height: 238upx;
  background-color: white;
  border-radius: 10upx;
  padding: 20upx;
  margin-bottom: 20upx;
}
</style>
